<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link href="../css/index.css" rel="stylesheet" type="text/css">

</head>

<body>

<style>
select{width:100px;}
dl[COPYSELECT]{float:left; width:98px; overflow:hidden; position:relative; z-index:10; border:#FFF solid 1px;}
dl[COPYSELECT]>dt{float:left; width:100%; height:28px; line-height:28px; background-color:#1AA1E2; color:#FFF;}
dl[COPYSELECT]>dd{float:left; height:28px; width:100%; line-height:28px; background-color:#FFF;}
dl[COPYSELECT]>dd:hover{background-color:#1AA1E2;}
</style>



<select>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
</select>
<button onClick="g()">get</button>
<br>

<div style="height:30px; float:left; width:100%; background-color:#CCC;">
    <dl COPYSELECT id="sel">
    	<input type="hidden" value="1">
        <dt val="1" title="1">1</dt>
        <dd val="1" title="1">1</dd>
        <dd val="2" title="2">2</dd>
        <dd val="3" title="3">3</dd>
        <dd val="4" title="4">4</dd>
        <dd val="5" title="5">5</dd>
    </dl>
</div>


<br>

<div style="background-color:#F00; width:100%;">kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</div>


<script src="../script/jquery-1.7.1.js"></script>
<script>
var selClass = function(selectIdStr){
	var selObj = $("#"+selectIdStr);
	var inputObj = selObj.children("input[type='hidden']");
	var dtObj = selObj.children("dt");
	var ddObj = selObj.children("dd");
	var events=function(){
		ddObj.hide(0);
		dtObj.click(function(){
			ddObj.slideToggle(100);
		});
		ddObj.click(function(){
			var val = $(this).attr("val");
			inputObj.val(val);
			dtObj.html($(this).html());
			dtObj.click();
		});
	};
	events();
	return {getVal:function(){
		return inputObj.val();
	}};
};


var s1 = new selClass("sel");

function g(){
	alert(s1.getVal());
}

</script>

</body>
</html>
